<template>
	<view class="qd">
	<view class="all">
		<div>签到有奖</div>
		<div>已经签到:{{qiandaocishu}}天</div>
		<view class="qiandaojiangli">
			<view  class="a"  @click="qiandao" :style="{backgroundColor:backgroundColor}">
			  <image class="abc" src="@/static/jindou.png"/>
			  <div class="ab">×{{qddou1}}</div>
		    </view>
		    <view class="b">
			  <image class="abc" src="@/static/jindou.png"/>
			  <div class="ab">×{{qddou2}}</div>
		    </view>
		    <view class="c">
			  <image class="abc" src="@/static/jindou.png"/>
			  <div class="ab">×{{qddou3}}</div>
		    </view>
		</view>
		
		<view class="leijijiangli">
			<view class="A" @click="leijijianglia" :style="{border:borders1}" >
				<image class="ABC" src="@/static/logo.png"/>
				<div class="AB">{{leijijiangli1}}</div>
			</view>
			<view class="B" :style="{border:borders2}" @click="leijijianglib">
				<image class="ABC" src="@/static/logo.png"/>
				<div class="AB">{{leijijiangli2}}</div>
			</view>
			<view class="C" :style="{border:borders3}" @click="leijijianglic">
				<image class="ABC" src="@/static/logo.png"/>
				<div class="AB">{{leijijiangli3}}</div>
			</view>
			<view class="D" :style="{border:borders4}" @click="leijijianglid">
				<image class="ABC" src="@/static/logo.png"/>
				<div class="AB">{{leijijiangli4}}</div>
			</view>
		</view>
		
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhang:"",
				qiandaocishu:0,
			    a1:'',
				a2:'',
				a3:'',
				qddou1:0,
				qddou2:0,
				qddou3:0,
				backgroundColor:"",
				borders1:"",
				borders1:"",
				borders1:"",
				borders1:"",
				leijijiangli1:0,
				leijijiangli2:0,
				leijijiangli3:0,
				leijijiangli4:0
			}
		},
		created() {
			this.zhang=getApp().globalData.zhang
			let now = new Date()
					let nian=now.getFullYear()
					let yue =now.getMonth()+1
					let ri =now.getDate()
					uni.request({
						url:"http://124.221.104.5:8080/huodong/update",
						data:{zhang:this.zhang,yue:yue,ri:ri,nian:nian},
						success: (res) => {
							this.qiandaocishu=res.data.qiandaocishu
							this.qddou1=200+this.qiandaocishu*200
							this.qddou2=200+this.qiandaocishu*200+200
							this.qddou3=200+this.qiandaocishu*200+200+200
							this.leijijiangli1=res.data.yilingqu+7
							this.leijijiangli2=res.data.yilingqu+14
							this.leijijiangli3=res.data.yilingqu+21
							this.leijijiangli4=res.data.yilingqu+28
							if(res.data.qiandao==1)
							this.backgroundColor="darksalmon"
							if(res.data.yilingqu<this.leijijiangli1&&this.qiandaocishu>=this.leijijiangli1)
							  this.borders1="2rpx solid red"
							  if(res.data.yilingqu<this.leijijiangli2&&this.qiandaocishu>=this.leijijiangli2)
							    this.borders2="2rpx solid red"
								if(res.data.yilingqu<this.leijijiangli3&&this.qiandaocishu>=this.leijijiangli3)
								  this.borders3="2rpx solid red"
								  if(res.data.yilingqu<this.leijijiangli4&&this.qiandaocishu>=this.leijijiangli4)
								    this.borders4="2rpx solid red"
						}
					});
		
		},
		methods: {
			qiandao(){
				if(this.backgroundColor="darksalmon")
				this.backgroundColor="antiquewhite"
				uni.request({
					url:"http://124.221.104.5:8080/huodong/qiandao",
					data:{zhang:this.zhang},
					success(res) {
				    if(res.data=="签到成功!")
					   {  
						   this.qiandaocishu+=1
						   uni.showToast({
						   	title:"签到成功!",
							icon:'success',
							duration:1000
						   })
					   }
					else
					 { 
					 uni.showToast({
					 	title:"今天已经签到过了哟!",
					 	icon:'none',
					 	duration:1000
					 })
					 
					 }
					},
					
				});
				uni.request({
					url:"http://124.221.104.5:8080/jbgn/lingjindou",
					data:{zhang:this.zhang,jindou:this.qddou1}
				})
				
			},
			leijijianglia(){
				if( this.borders1=="2rpx solid red")
				{  this.borders1=""
				  uni.request({
				  	url:"http://124.221.104.5:8080/huodong/leijijiangli",
					data:{zhang:this.zhang,leijijiangli:this.leijijiangli1}
				  })
				  }
				  
			},
			leijijianglib(){
				if( this.borders2=="2rpx solid red")
				 { this.borders1=""
				   this.borders2=""
				  uni.request({
				  	url:"http://124.221.104.5:8080/huodong/leijijiangli",
					data:{zhang:this.zhang,leijijiangli:this.leijijiangli2}
				  })}
			},
			leijijianglic(){
				if( this.borders3=="2rpx solid red")
				  {this.borders1=""
				  this.borders2=""
				  this.borders3=""
				  uni.request({
				  	url:"http://124.221.104.5:8080/huodong/leijijiangli",
					data:{zhang:this.zhang,leijijiangli:this.leijijiangli3}
				  })}
			},
			leijijianglid(){
				if( this.borders4=="2rpx solid red")
				 { this.borders1=""
				  this.borders2=""
				  this.borders3=""
				  this.borders4=""
				  uni.request({
				  	url:"http://124.221.104.5:8080/huodong/leijijiangli",
					data:{zhang:this.zhang,leijijiangli:this.leijijiangli4}
				  })}
			}
			
		}
	}
</script>

<style>
    .qd{
     	width: 420rpx;
	    height: 320rpx;
	    background-color: antiquewhite;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
    }
	.all{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
    .qiandaojiangli{
		 width:380rpx ;
		 height:170rpx ;
		 margin-top:20rpx ;
		 display: flex;
		 flex-direction: row;
		 align-items: center;
	}
	.abc{ 
		width:113rpx;
		height: 150rpx;
	}
	.ab{margin-top: -30rpx;}
	.a{ 
		display: flex;
	    flex-direction: column;
	    align-items: center;
		margin-left:10rpx ;
        width:113rpx;
        height: 150rpx;
		border: 2rpx solid red;
	}
	.b{
		display: flex;
	    flex-direction: column;
	    align-items: center;
		margin-left:10rpx ;
		width:113rpx;
		height: 150rpx;
		border: 2rpx solid aqua;
	}
	.c{
		display: flex;
	    flex-direction: column;
	    align-items: center;
		margin-left:10rpx ;
		width:113rpx;
		height: 150rpx;
		border: 2rpx solid aqua;
	}
	
	.leijijiangli{
		margin-top: 20rpx;
		width:340rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: antiquewhite;
	}
	.ABC{
		width: 50rpx;
		height: 50rpx;
	}
	.A{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.B{
		margin-left: 30rpx;

		width: 50rpx;
		height: 50rpx;
	}
	.C{
		margin-left: 30rpx;
		
		width: 50rpx;
		height: 50rpx;
	}
	.D{
		margin-left: 30rpx;
	
		width: 50rpx;
		height: 50rpx;
	}
	.AB{
		margin-top:-8rpx ;
		text-align: center;
	}
	
	
</style>
